﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>新方向</title>
    <link rel="stylesheet" href="css/ydui.css">
    <link rel="stylesheet" href="css/style.css">
    <script src='js/adaption.js'></script>

</head>

<body>

    <div class="banner person-top">
        <i class="back icon-back"></i>
        <i class="icon-setting"> <a href="person-set.html"></a></i>
        <div class="userinfo">
            <div class="avatar-box">
                <div class="avatar" style="background-image: url('./images/avatar.jpg')"></div>
            </div>
            <p>昵称1</p>
            <p>学员编号：00123</p>
        </div>
    </div>

    <div class="tab">
        <div class="tab-box">
            <ul class="tab-tit clearfix">
                <li class="active" data-type="myOrder">我的订单</li>
                <li data-type="myCollect">我的收藏</li>
            </ul>
        </div>
    </div>

    <!-----------订单和收藏区域--------->
    <!--我的订单-->
    <section class="my-order tab-con active">
        <ul class="course-list order-list">
            <li data-orderid="1010101">
                <a class="list-content" href="waitpay.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <div class="course-name">
                            <p class="name">订单号 V00110</p><span class="wait-pay">待支付</span></div>
                        <p class="tips"><span class="price">价格：9999.99</span><span class="time">时间：2018.08.08</span></p>
                    </div>
                </a>
                <div class="operate-box">
                    <button type="button" class="cancel-order-btn">取消订单</button>
                    <a href="order.html" class="pay-order-btn">立即支付</a>
                </div>
            </li>
            <li data-orderid="53323">
                <a class="list-content" href="waitpay.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <div class="course-name">
                            <p class="name">订单号 V00110</p><span class="wait-pay">待支付</span></div>
                        <p class="tips"><span class="price">价格：9999.99</span><span class="time">时间：2018.08.08</span></p>
                    </div>
                </a>
                <div class="operate-box">
                    <button type="button" class="cancel-order-btn">取消订单</button>
                    <a href="order.html" class="pay-order-btn">立即支付</a>
                </div>
            </li>
            <li data-orderid="125413">
                <a class="list-content" href="waitpay.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <div class="course-name">
                            <p class="name">订单号 V00110</p><span class="wait-pay">待支付</span></div>
                        <p class="tips"><span class="price">价格：9999.99</span><span class="time">时间：2018.08.08</span></p>
                    </div>
                </a>
                <div class="operate-box">
                    <button type="button" class="cancel-order-btn">取消订单</button>
                    <a href="order.html" class="pay-order-btn">立即支付</a>
                </div>
            </li>
            <li data-orderid="2524210">
                <a class="list-content" href="payed.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <div class="course-name">
                            <p class="name">订单号 V00110</p><span class="payed">已支付</span></div>
                        <p class="tips"><span class="price">价格：9999.99</span><span class="time">时间：2018.08.08</span></p>
                    </div>
                </a>
                <div class="operate-box">
                    <button type="button" class="delete-order-btn">删除订单</button>
                </div>
            </li>

        </ul>
    </section>
    <!--我的订单END-->
    <!-----------订单和收藏区域--------->
    <!--我的收藏-->
    <section class="my-order tab-con">
        <ul class="section course-list collect-list">
            <li data-orderid="45424524">
                <a href="course.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <p class="course-name">课程名称课程名称课程名称</p>
                        <span class="description">副标题副标题副标题</span>

                        <p class="tips">讲师：张大力<span>课节数：999</span></p>
                    </div>
                </a>

                <i class="icon-collect icon-active"></i>
            </li>
            <li data-orderid="15745453">
                <a href="course.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <p class="course-name">课程名称课程名称课程名称</p>
                        <span class="description">副标题副标题副标题</span>

                        <p class="tips">讲师：张大力<span>课节数：999</span></p>
                    </div>
                </a>

                <i class="icon-collect icon-active"></i>
            </li>
            <li data-orderid="864374">
                <a href="course.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <p class="course-name">课程名称课程名称课程名称</p>
                        <span class="description">副标题副标题副标题</span>

                        <p class="tips">讲师：张大力<span>课节数：999</span></p>
                    </div>
                </a>

                <i class="icon-collect icon-active"></i>
            </li>
            <li data-orderid="864374">
                <a href="course.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <p class="course-name">课程名称课程名称课程名称</p>
                        <span class="description">副标题副标题副标题</span>

                        <p class="tips">讲师：张大力<span>课节数：999</span></p>
                    </div>
                </a>

                <i class="icon-collect icon-active"></i>
            </li>
            <li data-orderid="864374">
                <a href="course.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <p class="course-name">课程名称课程名称课程名称</p>
                        <span class="description">副标题副标题副标题</span>

                        <p class="tips">讲师：张大力<span>课节数：999</span></p>
                    </div>
                </a>

                <i class="icon-collect icon-active"></i>
            </li>
            <li data-orderid="864374">
                <a href="course.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <p class="course-name">课程名称课程名称课程名称</p>
                        <span class="description">副标题副标题副标题</span>

                        <p class="tips">讲师：张大力<span>课节数：999</span></p>
                    </div>
                </a>

                <i class="icon-collect icon-active"></i>
            </li>
            <li data-orderid="864374">
                <a href="course.html">
                    <div class="thumbnail">
                        <img src="images/course-thumbnail01.png" alt="xx课程">
                    </div>
                    <div class="course-txt">
                        <p class="course-name">课程名称课程名称课程名称</p>
                        <span class="description">副标题副标题副标题</span>

                        <p class="tips">讲师：张大力<span>课节数：999</span></p>
                    </div>
                </a>

                <i class="icon-collect icon-active"></i>
            </li>
        </ul>
    </section>
    <!-----------订单和收藏区域END--------->


    <!-- template/order -->
    <script type="text/html" id="orderLi">
        {{each data as value}}
        <li data-orderid="1010101">
            <a class="list-content" href="waitpay.html">
                <div class="thumbnail">
                    <img src="{{value.image}}" alt="xx课程">
                </div>
                <div class="course-txt">
                    <div class="course-name">
                        <p class="name">新增订单号 V00110</p>
                        {{if value.orderSta =="waitpay"}}
                            <span class="wait-pay">待支付</span>
                            {{else if value.orderSta =="payed"}}
                            <span class="payed">已支付</span>
                        {{/if}}
                    </div>
                    <p class="tips"><span class="price">价格：9999.99</span><span class="time">时间：2018.08.08</span></p>
                </div>
            </a>
            <div class="operate-box">
                {{if value.orderSta =="waitpay"}}
                    <button type="button" class="cancel-order-btn">取消订单</button>
                    <a href="order.html" class="pay-order-btn">立即支付</a>
                    {{else if value.orderSta =="payed"}}
                    <button type="button" class="delete-order-btn">删除订单</button>
                {{/if}}
            </div>
        </li>
        {{/each}}
    </script>
    <!-- template/order END-->
    <!-- template/collect -->
    <script type="text/html" id="collectLi">
        {{each data as value}}
        <li data-orderid="864374">
            <a href="course.html">
                <div class="thumbnail">
                    <img src="images/course-thumbnail01.png" alt="xx课程">
                </div>
                <div class="course-txt">
                    <p class="course-name">{{value.csentence}}</p>
                    <span class="description">副标题副标题副标题</span>

                    <p class="tips">讲师：张大力<span>课节数：999</span></p>
                </div>
            </a>

            <i class="icon-collect icon-active"></i>
        </li>
        {{/each}}
    </script>
    <!-- template/collect END-->
    <script src="js/jquery.min.js"></script>
    <script src="js/ydui.js"></script>
    <script src="js/main.js"></script>
    <script src="js/arttemplate.js"></script>
    <script>
        $(function () {
            var dialog = YDUI.dialog;
            
            var type=$(".tab-tit li").eq(0).data('type'),customLoadAll={"myOrder":false,"myCollect":false},page=2,personPage={"myOrder":2,"myCollect":2},pageSize=5,myWrap=$(".order-list");
            (function () {
                //tab切换
                var $tabTit = $(".tab-tit li"),
                    $tabCon = $(".my-order.tab-con");
                $tabTit.on('click', function () {
                    var _index = $(this).index();
                    $(this).addClass('active').siblings().removeClass('active');
                    $tabCon.eq(_index).addClass('active').siblings().removeClass('active');

                    var myType = $(this).data('type');
                    myWrap = $tabCon.eq(_index).find(".course-list");
                    type=myType;
                    page=personPage[type];
                    
                    console.log(myType, myWrap,"page-----",personPage);

                });

                /*************
                    * 列表加载 by binggan 2018--8-23 11:58:31
                    * */
                   (function(){
                        var winHeight=$(window).height();
                        $(window).on('scroll', function () {
                            var oscrollTop = $(window).scrollTop(),
                                docHeight = $(document).height();
                            if ((oscrollTop + winHeight >= docHeight) && !customLoadAll[type]) {
                                console.log("----scroll waterFall----");
                                dialog.loading.open();

                                $.ajax({
                                    url: 'https://www.easy-mock.com/mock/5b0266d995118136368f1a78/test_copy_xinfangxiang',
                                    type: 'get',
                                    data: {
                                        type:type,
                                        page:personPage[type]
                                    },
                                    success: function (res) {
                                        dialog.loading.close();
                                        //console.log(res.data,res.data.length);
                                        var dataLen = res.data.length, html = '';
                                        switch(type){
                                            case "myOrder":
                                                var list = template('orderLi', res);
                                                myWrap.append(list);
                                                break;

                                            case "myCollect":
                                                var list = template('collectLi', res);
                                                myWrap.append(list);
                                                break;
                                            default :
                                                return false;
                                        }
                                        personPage[type]++;
                                        console.log(res);
                                        //console.log(dataLen+"-----------"+req.pageSize);
                                        if (dataLen < pageSize) {
                                            dialog.toast('已加载全部数据', 'none', 900);
                                            customLoadAll[type]=true;
                                        } else {
                                            customLoadAll[type]=false;
                                        }
                                    },
                                    error: function () {
                                        dialog.loading.close();
                                        dialog.toast('加载失败，请稍后重试', 'none', 900);
                                    }
                                });

                            }

                        });
                   })();


                var orderWrap=$(".order-list"),
                    $cancel = $(".cancel-order-btn"),
                    $delete = $(".delete-order-btn");
                //取消订单
                orderWrap.on('click',$cancel,function(){
                    deleteOrder.apply(this, ['url address', '请确认是否取消订单！']);
                });
                orderWrap.on('click',$delete,function(){
                    deleteOrder.apply(this, ['url address', '请确认是否删除订单！']);
                });
                // $cancel.on('click', function () {
                //     deleteOrder.apply(this, ['url address', '请确认是否取消订单！'])

                // });
                // //删除订单
                // $delete.on('click', function () {
                //     deleteOrder.apply(this, ['url address', '请确认是否删除订单！'])

                // });

                //取消收藏
                var collectWrap=$(".collect-list"),
                    $collect = $(".icon-collect");
                    collectWrap.on('click',$collect,function () {
                    deleteOrder.apply(this, ['', '请确认是否取消收藏！'])
                })

                /*
                *删除订单FUNC*/
                function deleteOrder(url, ordertip) {
                    var self = $(this);
                    var parent = self.parents("li"),
                        orderid = parent.data('orderid');
                    //console.log(this);
                    dialog.confirm('订单操作提示', ordertip, function () {
                        bingUtil.myAjax({
                            url: url,
                            type: 'post',
                            data: { "orderId": orderid },
                            callback: function (res) {
                                //服务器取消并删除成功响应
                                parent.remove();
                                dialog.toast('操作成功！', 'success', 1000);
                            }
                        });
                    });
                }

            })()

        });

    </script>
</body>

</html>